<template>
    <div>
        <div class="tzgg">
            <div class="t_top">
                <span>首页>我要留言</span>
            </div>
            <div class="contentWidth box">
                <sider-bar-component :menus="menus" class="aside"></sider-bar-component>
                <div class="t_x_right">
                    <section id="message">
                        <el-form ref="form" :label-position="'top'" :model="form" label-width="80px">
                            <el-form-item label="标题">
                                <el-input v-model="form.title" ></el-input>
                            </el-form-item>
                            <el-form-item label="内容">
                                <quill-editor
                                        v-model="form.content"
                                        ref="myQuillEditor"
                                        :options="editorOption"
                                        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                                        @change="onEditorChange($event)">
                                </quill-editor>
                            </el-form-item>
                            <el-form-item>
                                <el-button class="lyan" type="primary" @click="onSubmit">留言</el-button>
                            </el-form-item>
                        </el-form>
                    </section>

                </div>
            </div>


    </div>
    </div>
</template>

<script>
    import siderBarComponent from "../../components/siderBarComponent";
    import { quillEditor } from 'vue-quill-editor'
    export default {
        name: "message",
        components:{
            quillEditor,
            siderBarComponent
        },
        data() {
            return {
                menus:['我要留言'],
                form: {
                    title : '',
                    content:''
                },
                editorOption:{
                    placeholder: '请输入文本...',
                }
            }
        },
        methods: {
            onEditorBlur(editor){//失去焦点事件
            },
            onEditorFocus(editor){//获得焦点事件
            },
            onEditorChange({editor,html,text}){//编辑器文本发生变化
                //this.content可以实时获取到当前编辑器内的文本内容
                console.log(this.content);
            },
            onSubmit() {
                console.log('submit!');
            }
        }
    }
</script>

<style scoped lang="less">
    .tzgg{
        padding-top: 20px;
        width: 1200px;
        margin: 0 auto;
    }
    .t_top{
        width: 100%;
        height: 30px;
        background-color: #99a9bf;
        span{
            line-height: 30px;
            float: left;
        }
    }
    .t_x{
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-top: 15px;
        .t_x_left{
            width: 25%;

        }
        .t_x_right{
            width: 70%;
        }
    }
    .t_x_left_t{
        width: 100%;
        height: 50px;
        border-top: #99a9bf solid 2px;
        border-bottom: #99a9bf solid 2px;
        font-size: 15px;
        color: #037EDB;
        .z{
            line-height: 50px;
            display: inline-block;
            float: left;
            margin-left: 7px;
        }
        .r{
            line-height: 50px;
            display: inline-block;
            float: right;
        }
        .r img{
            margin-top: 15px;
        }
    }

    #message {
        margin-top: 30px;
        margin-bottom: 30px;
        text-align: left;
        width: 100%;

    }

    .box{
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        .aside{
            width: 230px;

        }
    }


</style>